<template>
	<view class="main-box">
		<view class="navigator-bar" :style="{'padding-top': safeTop + 'px'}">
			<image class="back-img" src="/static/backArrow2.png" @click="back()"></image>
			<text class="page-title">{{ type === 0 ? '感兴趣' : '集合过'}}</text>
			<view class="submit-button" @click="publishActivity()" v-if="type === 0">管理</view>
		</view>
		<scroll-view class="activity-list" scroll-y="true" :style="{'height': `calc(100vh - 86rpx - ${safeTop}px)`}">
			<!-- <uni-search-bar :radius="5" @input="searchActivity" clearButton="auto" cancelButton="none"
				placeholder="搜索活动名称" class="search-box" @clear="clearSearch"></uni-search-bar> -->
			<view class="activity-box" v-for="activity of activities" @click="jumpToDeatail(activity.id)">
				<view class="img-box">
					<image class="activity-img" :src="activity.cover"></image>
				</view>
				<view class="content-box">
					<view class="activity-title-box">
						<view class="activity-title">{{ activity.name }}</view>
						<!-- <image class="title-img" src="/static/more.png" v-if="type === 1"></image> -->
					</view>
					<view class="activity-labels">
						<view class="label-item" v-for="label of activity.labels.split(',')">{{ label }}</view>
					</view>
					<view class="price-box">
						<view class="price-text" v-if="activity.cost">¥{{ activity.cost }}<text
								class="price-unit">/人</text></view>
						<view class="free" v-if="!activity.cost">免费</view>
						<view class="user-box">
							<view class="activity-avatar-box" v-for="(user, index) of activity.activityUserList"
								v-if="index < 3" :style="{'left': `-${(index + 1) * 26}rpx`, 'z-index': 100 - index}">
								<image class="avatar-img" :src="user.avatar"></image>
							</view>
							<view class="user-num">{{ activity.activityUserList.length }}/{{ activity.maxPerson }}
							</view>
						</view>
					</view>
					<view class="status-box">
						<view class="distance-box">
							<image class="distance-img" src="/static/listLocation.png"></image>
							<text class="distance-text">距你{{ getDistance({latitude: myLocation.latitude, longitude: myLocation.longitude}, {latitude: activity.lat, longitude: activity.lon}) }}</text>
						</view>
						<view class="concern-num">{{ activity.likeNum ? activity.likeNum : 0 }}人感兴趣</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 0,
				safeTop: 0,
				activities: [],
				pageNum: 1,
				myLocation: {},
				userId: null
			};
		},
		onLoad(e) {
			this.type = +e.type;
			if (e.userId) {
				this.userId = +e.userId;
			}
			this.safeTop = this.$safeTop;
			this.myLocation = this.$myLocation;
			this.getActivities();
		},
		methods: {
			back() {
				uni.navigateBack();
			},
			searchActivity(e) {

			},
			clearSearch() {

			},
			getActivities() {
				const params = {
					pageSize: 50,
					pageNum: this.pageNum,
					orderByColumn: 'create_time',
					isAsc: 'desc',
					isJoin: this.type
				}
				if (this.userId) {
					params.userId = this.userId
				}
				this.$apis.getMyConcernActivities(params).then(res => {
					if (res.code === 0) {
						this.activities = res.data.list;
					}
				});
			},
			jumpToDeatail(id) {
				uni.navigateTo({
					url: `/pages/activityDetail?id=${id}`
				})
			},
			getDistance(p1, p2) {
				var radLat1 = p1.latitude * Math.PI / 180.0;
				var radLat2 = p2.latitude * Math.PI / 180.0;
				var a = radLat1 - radLat2;
				var b = p1.longitude * Math.PI / 180.0 - p2.longitude * Math.PI / 180.0;
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137;
				s = Math.round(s * 10000) / 10;
				let res = '';
				if (s > 1000) {
					res = (s / 1000).toFixed(1) + '公里';
				} else {
					res = s + '米';
				}
				return res;
			}
		}
	}
</script>

<style lang="scss">
	.main-box {
		width: 100vw;
		height: 100vh;
		background-color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: hidden;

		.navigator-bar {
			width: 100vw;
			height: 86rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.back-img {
				width: 24rpx;
				height: 40rpx;
				margin-left: 42rpx;
				z-index: 999;
			}

			.page-title {
				font-size: 38rpx;
				font-weight: bold;
				color: #222222;
				position: absolute;
				width: 100vw;
				line-height: 38rpx;
				text-align: center;
			}

			.submit-button {
				font-size: 36rpx;
				line-height: 61rpx;
				font-weight: 400;
				color: #222222;
				z-index: 999;
				margin-right: 42rpx;
			}
		}

		.activity-list {
			width: 100%;
			
			.activity-box {
				width: 686rpx;
				margin-left: 32rpx;
				margin-top: 48rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			
				.img-box {
					width: 280rpx;
					height: 220rpx;
			
					.activity-img {
						width: 280rpx;
						height: 220rpx;
						border-radius: 28rpx;
					}
				}
			
				.content-box {
					width: 374rpx;
					height: 220rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: space-between;
			
					.activity-title-box {
						width: 100%;
						display: flex;
						justify-content: space-between;
			
						.activity-title {
							width: 100%;
							font-size: 28rpx;
							font-weight: bold;
							color: #222222;
							line-height: 28rpx;
						}
			
						.title-img {
							width: 6rpx;
							height: 26rpx;
							margin-top: 4rpx;
						}
					}
			
			
					.activity-labels {
						width: 100%;
			
						.label-item {
							display: inline-block;
							padding: 2rpx 8rpx 2rpx 8rpx;
							margin-right: 8rpx;
							background: #F6F7F9;
							border-radius: 15rpx;
							font-size: 20rpx;
							font-weight: 400;
							color: #666666;
						}
					}
			
					.price-box {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
			
						.price-text {
							font-size: 32rpx;
							font-weight: bold;
							color: #FF5E2E;
			
							.price-unit {
								font-size: 20rpx;
							}
						}
			
						.free {
							font-size: 32rpx;
							font-weight: bold;
							color: #31B57E;
						}
			
						.user-box {
							position: relative;
			
							.user-num {
								height: 32rpx;
								padding: 0 12rpx 0 12rpx;
								background: #F6F7F9;
								border-radius: 24px;
								border: 2rpx solid #FFFFFF;
								font-size: 20rpx;
								font-weight: bold;
								color: #999999;
								line-height: 32rpx;
								z-index: 999;
								position: sticky;
							}
			
							.activity-avatar-box {
								width: 28rpx;
								height: 28rpx;
								border-radius: 16rpx;
								border: 2rpx solid #FFFFFF;
								position: absolute;
								top: -8rpx;
			
								.avatar-img {
									width: 28rpx;
									height: 28rpx;
									border-radius: 16rpx;
								}
							}
						}
					}
			
					.status-box {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						
						.distance-box {
							display: flex;
							align-items: center;
							
							.distance-img {
								width: 20rpx;
								height: 24rpx;
							}
							
							.distance-text {
								font-size: 24rpx;
								font-weight: 400;
								color: #999999;
								line-height: 24rpx;
								margin-left: 12rpx;
							}
						}
			
						.concern-num {
							font-size: 24rpx;
							font-weight: 400;
							color: #999999;
							line-height: 24rpx;
						}
					}
				}
			}
		}
	}
</style>
